<template>
  <div class="tags-page">
    <el-row :gutter="20">
      <!-- 标签管理 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="title">🏷️ 标签管理</span>
              <el-button type="primary" size="small" @click="handleAddTag">
                <el-icon><Plus /></el-icon>
                新增标签
              </el-button>
            </div>
          </template>

          <el-table :data="tagList" border>
            <el-table-column prop="name" label="标签名称" width="150" />
            <el-table-column prop="category" label="标签分类" width="120">
              <template #default="{ row }">
                {{ getCategoryName(row.category) }}
              </template>
            </el-table-column>
            <el-table-column prop="color" label="颜色" width="100">
              <template #default="{ row }">
                <el-tag :color="row.color" style="border: none;">
                  {{ row.name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="memberCount" label="会员数" width="100" />
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleEditTag(row)">编辑</el-button>
                <el-button link type="danger" @click="handleDeleteTag(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 标签应用 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span class="title">标签应用</span>
          </template>

          <el-form label-width="100px">
            <el-form-item label="选择会员">
              <el-select v-model="applyForm.memberId" filterable>
                <el-option label="张三 (13800138001)" value="M10001" />
                <el-option label="李四 (13800138002)" value="M10002" />
              </el-select>
            </el-form-item>

            <el-form-item label="当前标签">
              <div class="current-tags">
                <el-tag 
                  v-for="tag in currentMemberTags" 
                  :key="tag.id"
                  closable
                  @close="handleRemoveTag(tag)"
                  style="margin-right: 10px; margin-bottom: 10px;"
                >
                  {{ tag.name }}
                </el-tag>
                <el-tag v-if="currentMemberTags.length === 0" type="info">暂无标签</el-tag>
              </div>
            </el-form-item>

            <el-form-item label="添加标签">
              <el-select v-model="applyForm.tagIds" multiple placeholder="选择标签">
                <el-option 
                  v-for="tag in tagList" 
                  :key="tag.id"
                  :label="tag.name" 
                  :value="tag.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleApplyTags">应用标签</el-button>
              <el-button @click="handleClearTags">清空标签</el-button>
            </el-form-item>
          </el-form>

          <el-divider />

          <div class="tag-analysis">
            <h4>标签统计</h4>
            <div class="tag-stats">
              <div v-for="tag in tagList" :key="tag.id" class="tag-stat-item">
                <el-tag :color="tag.color" style="border: none;">{{ tag.name }}</el-tag>
                <el-progress :percentage="(tag.memberCount / 100)" :show-text="false" />
                <span class="tag-count">{{ tag.memberCount }}人</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 标签对话框 -->
    <el-dialog v-model="tagDialogVisible" :title="tagDialogTitle" width="500px">
      <el-form :model="tagForm" label-width="100px">
        <el-form-item label="标签名称">
          <el-input v-model="tagForm.name" />
        </el-form-item>
        <el-form-item label="标签分类">
          <el-select v-model="tagForm.category">
            <el-option label="消费行为" value="behavior" />
            <el-option label="兴趣偏好" value="interest" />
            <el-option label="消费能力" value="ability" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签颜色">
          <el-color-picker v-model="tagForm.color" />
        </el-form-item>
        <el-form-item label="标签描述">
          <el-input v-model="tagForm.description" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="tagDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleTagSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Present } from '@element-plus/icons-vue'

const tagList = ref([
  { id: 1, name: '高价值客户', category: 'ability', color: '#f56c6c', memberCount: 234 },
  { id: 2, name: '活跃用户', category: 'behavior', color: '#67c23a', memberCount: 1234 },
  { id: 3, name: '数码爱好者', category: 'interest', color: '#409eff', memberCount: 567 },
  { id: 4, name: '潜在流失', category: 'behavior', color: '#e6a23c', memberCount: 89 }
])

const currentMemberTags = ref([
  { id: 1, name: '高价值客户' },
  { id: 2, name: '活跃用户' }
])

const applyForm = reactive({
  memberId: '',
  tagIds: []
})

const tagDialogVisible = ref(false)
const tagDialogTitle = ref('新增标签')

const tagForm = reactive({
  name: '',
  category: 'behavior',
  color: '#409eff',
  description: ''
})

const getCategoryName = (category) => {
  const map = { behavior: '消费行为', interest: '兴趣偏好', ability: '消费能力', other: '其他' }
  return map[category] || category
}

const handleAddTag = () => {
  tagDialogTitle.value = '新增标签'
  tagDialogVisible.value = true
}

const handleEditTag = (row) => {
  tagDialogTitle.value = '编辑标签'
  Object.assign(tagForm, row)
  tagDialogVisible.value = true
}

const handleDeleteTag = () => {
  ElMessage.success('删除成功')
}

const handleTagSubmit = () => {
  ElMessage.success('保存成功')
  tagDialogVisible.value = false
}

const handleRemoveTag = () => {
  ElMessage.success('标签已移除')
}

const handleApplyTags = () => {
  ElMessage.success('标签应用成功')
}

const handleClearTags = () => {
  currentMemberTags.value = []
  ElMessage.success('标签已清空')
}
</script>

<style scoped>
.tags-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.current-tags {
  min-height: 40px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}

.tag-analysis h4 {
  margin: 0 0 15px 0;
}

.tag-stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tag-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag-count {
  min-width: 60px;
  text-align: right;
  color: #606266;
}
</style>

